<template>
	<!-- <view :style="{'padding-top': tag == 0?'90rpx':'190rpx'}"> -->
	<!-- <view :style="{'padding-top': tag == 0?'90rpx':'120rpx'}"> -->
	<view :style="{'padding-top': tag == 0?'90rpx':'20rpx'}">
		
		
		<block v-if="tag == 1">
			<!-- <view class="search">
				<view class="search-view">
					<input type="text" value="" placeholder="请输入商品名称搜索您的商品" placeholder-style="color: #999999"/>
					<text class="iconfont icon-sousuo"></text>
				</view>
			</view> -->
			
			<view class="noCart" v-if="list.length == 0">
				<view class="pictrue">
					<image src="/static/images/noInvoice.png"></image>
				</view>
			</view>
			
			<view class="goods-list" v-else>
				<view class="goods-item" v-for="(item,index) in list" :key="index">
					<view class="goods-a">
						<image :src="item.image" mode=""></image>
						<view class="goods-detail">
							<view class="title">{{item.store_name}}</view>
							<view class="num">
								<view>商品价: {{item.price}}元/件</view>
								<!-- <view>商城价: 50元/件</view> -->
							</view>
						</view>
					</view>
					<view class="goods-b">
						<view>本月销售量:</view>
						<view>{{item.this_month_sales_num || 0}}件</view>
					</view>
					<view class="goods-b">
						<view>本月销售额:</view>
						<view>{{item.this_month_sales_money || 0}}元</view>
					</view>
					<view class="goods-b">
						<view>上月销售量:</view>
						<view>{{item.last_month_sales_num || 0}}件</view>
					</view>
					<view class="goods-b">
						<view>上月销售额:</view>
						<view>{{item.last_month_sales_money || 0}}元</view>
					</view>
					<!-- <view class="goods-b">
						<view>商品奖励金:</view>
						<view style="color: #ff1619;">未达标</view>
					</view> -->
					<!-- <view class="goods-c">
						<view class="goods-c-but but_1">
							<view class="text_a">商品累计提现</view>
							<view class="text_b">1000000<text>元</text></view>
						</view>
						<view class="goods-c-but but_2">
							<view class="text_a">商品累计提现</view>
							<view class="text_b">1000000<text>元</text></view>
						</view>
					</view> -->
				</view>
			</view>
			
		</block>
	</view>
</template>

<script>
	import { product_apply,product_list } from '@/api/user.js'
	export default {
		data() {
			return {
				realname: '', //姓名
				mobile: '', //手机号码
				outer_packing_image: '', //外包装
				inner_packing_image: '', //内包装
				business_licence_image: '', //营业执照
				other_image: '', //其他资料
				instruction: '', //商品说明
				tag: 1,
				page: 1,
				limit: 10,
				list: [],
				tips: ''
			}
		}, 
		onLoad() {
			this.productlist();
		},
		methods: {
			productlist(){
				let self = this;
				product_list().then(res => {
					console.log('请求成功',res.data.list);
					if(res.data.count == self.limit){
						self.page++
					}
					self.list = res.data.list;
					self.tips = res.data.tips;
				}).catch(err => {
					console.log('请求失败',err);
				})
			},
			clickTag(i){
				this.tag = i;
				if(this.tag != i){
					this.tag = i;
				}
				if(i == 1){
					this.productlist();
				}
			},
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function(i) {
				let that = this;
				that.$util.uploadImageChange('upload/image', (res) => {
					if(i==0){
						that.outer_packing_image = res.data.url;
					}else if(i==1){
						that.inner_packing_image = res.data.url;
					}else if(i==2){
						that.business_licence_image = res.data.url;
					}else if(i==3){
						that.other_image = res.data.url;
					}
				}, (err) => {
					console.log('上传文件失败',err)
				});
			},
			apply(){
				let self = this;
				if (!self.realname) return self.$util.Tips({
					title: '请输入联系人！'
				});
				if (!self.mobile) return self.$util.Tips({
					title: '请输入联系人电话！'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(self.mobile))) return self.$util.Tips({
					title: '请输入正确的手机号码！'
				});
				if (!self.outer_packing_image) return self.$util.Tips({
					title: '请上传外包装！'
				});
				if (!self.inner_packing_image) return self.$util.Tips({
					title: '请上传内包装！'
				});
				if (!self.business_licence_image) return self.$util.Tips({
					title: '请上传营业执照！'
				});
				if (!self.instruction) return self.$util.Tips({
					title: '请输入商品说明！'
				});
				product_apply({
					realname: self.realname,
					mobile: self.mobile,
					outer_packing_image: self.outer_packing_image,
					inner_packing_image: self.inner_packing_image,
					business_licence_image: self.business_licence_image,
					other_image: self.other_image,
					instruction: self.instruction
				}).then(res => {
					console.log('请求成功',res);
					self.$util.Tips({
						title: res.msg
					});
					that.tag = 1;
					that.page = 1;
					that.list = [];
					that.productlist();
				}).catch(err => {
					self.$util.Tips({
						title: err
					});
				})
			}
		}
	}
</script>

<style lang="less">
.header-tag{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	background-color: #FFFFFF;
	display: flex;
	.header-tag-item{
		width: 50%;
		font-size: 32rpx;
		line-height: 90rpx;
		text-align: center;
	}
	.item-color-active{
		color: #0084f6;
	}
	.item-color{
		color: #000000;
	}
}
.header-title{
	font-size: 34rpx;
	color: #000000;
	font-weight: 900;
	text-align: center;
	line-height: 140rpx;
	background-color: #0082f7;
	letter-spacing: 2rpx;
}
.header-image{
	width: 100%;
	image{
		display: block;
		width: 100%;
		height: 91rpx;
	}
}
.view{
	background-color: #FFFFFF;
	padding: 0 40rpx;
	margin-bottom: 12rpx;
	.view-item{
		display: flex;
		border-bottom: 2rpx solid #F4F4F4;
		.view-item-a{
			width: 200rpx;
			font-size: 30rpx;
			color: #2D2D2D;
			line-height: 100rpx;
		}
		input{
			width: 400rpx;
			height: 100rpx;
			font-size: 30rpx;
			color: #2D2D2D;
			line-height: 100rpx;
		}
	}
	.view-item:last-child{
		border-bottom: none;
	}
	.view-title{
		font-size: 30rpx;
		color: #2D2D2D;
		line-height: 80rpx;
	}
	.view-upload{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.view-image{
			width: 310rpx;
			height: 180rpx;
			image{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.image-margin{
			margin-bottom: 34rpx;
		}
	}
	textarea{
		width: 100%;
		height: 210rpx;
		font-size: 24rpx;
		color: #1B1B1B;
		line-height: 35rpx;
		padding-bottom: 20rpx;
	}
}
.submit-determine{
	width: 604rpx;
	font-size: 30rpx;
	color: #FFFFFF;
	line-height: 84rpx;
	margin: 40rpx auto;
	text-align: center;
	background-color: #dd4134;
	border-radius: 84rpx;
}

.search{
	width: 690rpx;
	position: fixed;
	top: 90rpx;
	left: 30rpx;
	z-index: 99;
	padding: 20rpx 0;
	.search-view{
		display: flex;
		border-radius: 60rpx;
		border: 2rpx solid #3a1ed7;
		input{
			width: 85%;
			height: 56rpx;
			font-size: 20rpx;
			color: #000000;
			line-height: 56rpx;
			padding: 0 50rpx;
		}
		text{
			display: block;
			width: 15%;
			font-size: 50rpx;
			color: #3a1ed7;
			line-height: 56rpx;
		}
	}
}
.goods-list{
	padding: 0 30rpx;
	.goods-item{
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		.goods-a{
			display: flex;
			padding-bottom: 10rpx;
			border-bottom: 2rpx solid #EEEEEE;
			image{
				display: block;
				width: 130rpx;
				height: 130rpx;
			}
			.goods-detail{
				width: 520rpx;
				padding-left: 40rpx;
				.title{
					height: 90rpx;
					font-size: 22rpx;
					color: #333333;
					line-height: 30rpx;
					display: block;
					font-size:12px;
					overflow:hidden; 
					text-overflow:ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical;
					-webkit-line-clamp: 3; 
				}
				.num{
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;
					view{
						font-size: 22rpx;
						color: #333333;
						line-height: 30rpx;
					}
				}
			}
		}
		.goods-b{
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #EEEEEE;
			view{
				font-size: 24rpx;
				line-height: 70rpx;
				color: #333333;
				font-weight: 600;
			}
		}
		.goods-c{
			display: flex;
			padding-top: 10rpx;
			.goods-c-but{
				padding: 10rpx 40rpx;
				border-radius: 60rpx;
				margin-right: 30rpx;
				.text_a{
					font-size: 20rpx;
					line-height: 1;
					color: #333333;
				}
				.text_b{
					font-size: 26rpx;
					line-height: 30rpx;
					color: #fd2b52;
					text{
						font-size: 20rpx;
						color: #333333 !important;
					}
				}
			}
			.but_1{
				background-color: #fc9a00;
			}
			.but_2{
				background-color: #00baf5;
			}
		}
	}
}
.noCart {
	margin-top: 171rpx;
	padding-top: 0.1rpx;
	.pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
